<template>
  <!-- 登录 -->
  <div class="login">
    <div
      class="head flexcc"
      @click="openUrl('/')"
    >
      <img
        src="@/assets/img/fleetmanagers.net_2.png"
        alt=""
      />
    </div>
    <div class="flexcs-col">
      <div class="con">
        <div class="title flexcc">{{ t('login.title') }}</div>
        <el-form
          ref="formEl"
          class="mt-5"
          label-position="top"
          :model="formData"
          :rules="rules"
        >
          <!-- :label="t('login.FullName')" -->
          <el-form-item prop="username">
            <el-input
              v-model="formData.username"
              :placeholder="t('login.FullName')"
            ></el-input>
          </el-form-item>
          <!-- :label="t('login.Password')" -->
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="formData.password"
              :placeholder="t('login.Password')"
              show-password
              @keyup.enter="submit"
              @input="formData.password = formData.password.replace(/[\u4E00-\u9FA5]/g,'')"
            ></el-input>
            <!-- show-password -->
          </el-form-item>
          <!-- <el-form-item label="">
            <el-checkbox v-model="isRemember">
              {{ t('login.RememberMe') }}
            </el-checkbox>
          </el-form-item> -->
        </el-form>
        <div class="flexec">
          <div
            class="flexcc pointer"
            @click="openUrl('/passwordRecovery')"
          >
            {{ t('login.ForgotPassword') }}
          </div>
        </div>

        <el-button
          class="btn mt-5"
          type="primary"
          @click="submit"
          :loading="loading"
        >
          {{ t('login.btn') }}
        </el-button>

        <div class="tip mt-8 flexcc-col">
          <div class="mt-5">{{ t('login.DontHaveUser') }}</div>
          <el-button
            class="btn2"
            type="primary"
            @click="openUrl('/register')"
          >
            {{ t('login.CreateNewUserHere') }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { encrypt, decrypt, openUrl } from '@/utils'
import useLogin from '@/stores/login.js'
import { loginApi, getCustomerInfoApi } from '@/service/login.js'

const router = useRouter()
const route = useRoute()

const { t, locale } = useI18n()

watch(locale, (n) => {
  //
})

const store = useLogin()
const { setU, setUserInfo, setToken } = store

// 表单
const formData = reactive({
  username: '',
  password: ''
})
const rules = reactive({
  username: [
    {
      required: true,
      message: t('login.FullNameErrMsg'),
      trigger: 'change'
    }
  ],
  password: [
    {
      required: true,
      message: t('login.PasswordErrMsg'),
      trigger: 'change'
    }
  ]
})
// 记住用户名密码
const isRemember = ref(false)
if (store.u) {
  isRemember.value = true
  formData.username = decrypt(store.u.n)
  formData.password = decrypt(store.u.p)
}

// 提交
const loading = ref(false)
const formEl = ref(null)
const submit = () => {
  if (!formEl.value) return
  formEl.value.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      loginApi(formData)
        .then(({ token }) => {
          loading.value = false
          if (isRemember.value === true) {
            setU({
              n: encrypt(formData.username),
              p: encrypt(formData.password)
            })
          } else {
            setU(null)
          }
          getUserInfo()
          setToken(token)
          openUrl('/')
        })
        .catch(() => {
          loading.value = false
        })
    }
  })
}

// 获取登录用户信息
const getUserInfo = () => {
  getCustomerInfoApi().then(({ data }) => {
    setUserInfo(data)
  })
}
</script>

<style scoped lang="scss">
.login {
  // background: #f5f5f5;

  --el-component-size: 45px;
  --el-color-primary: var(--titleColor);
  --el-text-color-regular: var(--titleColor);
  --el-color-primary-light-3: var(--titleColor);
  --el-color-primary-dark-2: #000;

  .pointer {
    cursor: pointer;
  }

  .head {
    height: 50px;
    background: var(--mainColor);
    color: #fff;
    img {
      height: 20px;
    }
  }

  .title {
    font-size: 30px;
    font-weight: bold;
  }
  .con {
    width: 381px;
    min-height: 400px;
    padding: 40px;
    // padding: 70px 0 0;
    .btn {
      width: 100%;
      height: 46px;
    }
    .tip {
      border-top: 1px solid var(--titleColor);
      .btn2 {
        margin-top: 26px;
        width: 160px;
        height: 46px;
      }
    }
  }
}
</style>
